<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/echo.min.js"></script>
    <title>图片延迟加载</title>
    <style>
    *{
      margin:0;
      padding:0;
    }
    img{
        width:100px;
        height:100px;
        display: block;
       margin:15px auto;
    }

    </style>
</head>

<body>
        <img data-echo='img/1.jpg'  src="https://www.shenxuanche.com/h5_page/util/img/img_error.png">
        <img src="img/2.jpg">
        <img src="img/3.jpg">
        <img src="img/3.jpg">
        <img src="img/2.jpg">
        <img src="img/1.jpg">
        <img src="img/1.jpg">
        <img data-echo="img/2.jpg"src="https://www.shenxuanche.com/h5_page/util/img/img_error.png">
        <img data-echo="img/3.jpg"src="https://www.shenxuanche.com/h5_page/util/img/img_error.png">
        <img data-echo="img/1.jpg"src="https://www.shenxuanche.com/h5_page/util/img/img_error.png">
        <img data-echo="img/1.jpg"src="https://www.shenxuanche.com/h5_page/util/img/img_error.png">
        <img data-echo="img/2.jpg"src="https://www.shenxuanche.com/h5_page/util/img/img_error.png">
        <img data-echo="img/3.jpg"src="https://www.shenxuanche.com/h5_page/util/img/img_error.png">

    <script>
      echo.init();
        // 一、 图片懒加载（ 预加载） echo.js

        // 使用:
        //     1 > 引入echo.js
        // 2 > 在dom节点图片上加入

        // data - echo = '要加载的图片路径'

        // 3 > echo.init()
    </script>
</body>

</html>